<script>
export default {
  name: 'FormContainer',
  abstract: true,
  props: {
    column: {
      type: Number,
      default: 4
    },
    row: {
      // 标识占一整行的el-form-item
      type: String,
      default: 'row'
    },
    btn: {
      // 标识是button容器的el-form-item
      type: String,
      default: 'btn'
    }
  },
  render(h) {
    const vnode = this.$scopedSlots.default()[0]
    if (
      !vnode.componentOptions.tag ||
      vnode.componentOptions.tag !== 'el-form'
    ) {
      console.error('子组件不是el-form')
      return h('span', '子组件不是el-form')
    }

    vnode.data.staticClass = this.$style['custom-form']
    let labelWidth = parseInt(vnode.componentOptions.propsData.labelWidth)
    if (isNaN(labelWidth)) {
      labelWidth = 0
    }
    const children = vnode.componentOptions.children || []
    for (const n of children) {
      if (!n.componentOptions) {
        continue
      }
      if (n.componentOptions.tag === 'el-form-item') {
        if (!n.componentOptions.listeners) {
          n.componentOptions.listeners = {}
        }
        n.componentOptions.listeners['hook:mounted'] = () => {
          const self = n.componentInstance
          let el = n.componentInstance.$el
          if (!(this.row in self.$attrs) && !(this.btn in self.$attrs)) {
            el.style.flex = `0 0 calc(${100 / this.column}% - 10px)`
          } else if (this.row in self.$attrs) {
            el.classList.add(this.$style['form-item-row'])
          } else if (this.btn in self.$attrs) {
            el.classList.add(this.$style['form-item-btns'])
            el.style.paddingLeft = `${labelWidth}px`
          }
          el = el.querySelector('.el-form-item__content')
          el.style.width = `calc(100% - ${labelWidth}px)`
        }
        if (n.componentOptions.children) {
          for (const c of n.componentOptions.children) {
            if (!c.componentOptions) {
              continue
            }
            // 设置el-seclect样式
            if (c.componentOptions.tag === 'el-select') {
              c.data.staticStyle = Object.assign(c.data.staticStyle || {}, {
                width: '100%'
              })
            } else if (c.componentOptions.tag === 'el-date-picker') {
              c.data.staticStyle = Object.assign(c.data.staticStyle || {}, {
                width: '100%'
              })
            }
          }
        }
      }
    }
    return vnode
  }
}
</script>
<style lang="scss" module>
// form样式
$labelWidth: 100px;
@import "@/styles/mixin.scss";
.custom-form {
  @include flex($wrap: wrap);
  & .el-form-item {
    flex: 0 0 calc(25% - 10px);
    &>[class*="el-form-item__content"] {
      width: calc(100% - #{$labelWidth});
    }
  }
  & .form-item-row {
    flex: 1 0 calc(100% - 10px);
    &>[class*="el-form-item__content"] {
      // width: 100% !important;
      flex: 1 1 100%;
      // padding-left: $labelWidth;
      @include flex($dis:inline-flex, $justify: center, $wrap: wrap);
    }
  }
  & .form-item-btns {
    flex: 1 0 calc(100% - 10px);
    &>[class*="el-form-item__content"] {
      width: 100% !important;
      flex: 1 1 100%;
      // padding-left: $labelWidth;
      @include flex($justify: center, $wrap: wrap);
      & > * {
        margin-bottom: 20px;
      }
      &>*:not(:first-child){
        margin-left: 10px;
      }
    }
  }
}
</style>
